<template>
	<view class="itu-official-account">
		<view class="itu-official-account__content" :style="[{borderColor: border?'#e7e7e7':'transparent', borderRadius}]">
			<view class="itu-flex itu-align-center">
				<view class="itu-official-account__logo" :style="[{background: defaultColor}]">
					<image :src="logo" :style="[logoStyle]"></image>
				</view>
				<view class="itu-ml-15">
					<view class="itu-flex itu-align-center itu-text-lg">
						<view class="itu-mr-10 itu-official-account__title" :style="[{width: titleWidth}]">{{ title }}</view>
						<view class="itu-official-account__tag" :style="[{width: tagWidth}]">{{ tag }}</view>
					</view>
					<view class="itu-mt-10 itu-text-sm itu-text-gray itu-text-left">{{ description }}</view>
				</view>
			</view>
			<view class="itu-official-account__close" @click="emit('close')" v-if="closeable">{{ closeText }}</view>
			<view class="itu-official-account__follow itu-flex itu-align-center itu-ml-5" :style="[{width: followWidth}]" @click="emit('follow')">{{ followText }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "itu-official-account",
		props: {
			// 主题色
			themeColor: {
				type: String,
				default: ''
			},
			// 公众号图标
			logo: {
				type: String,
				default: ""
			},
			// 公众号样式
			logoStyle: {
				type: Object,
				default: () => {
					return {
						width: "100rpx",
						height: "100rpx",
						borderRadius: "50%"
					}
				}
			},
			// 公众号名称
			title: {
				type: String,
				default: ""
			},
			// 公众号宽度
			titleWidth: {
				type: String,
				default: "auto"
			},
			// 标签
			tag: {
				type: String,
				default: "公众号"
			},
			// 标签宽度
			tagWidth: {
				type: String,
				default: "80rpx"
			},
			// 公众号描述
			description: {
				type: String,
				default: "关注公众号，及时获取最新信息!"
			},
			// 关注文本
			followText: {
				type: String,
				default: "立即关注"
			},
			// 关注文本宽度
			followWidth: {
				type: String,
				default: "140rpx"
			},
			// 是否可关闭
			closeable: {
				type: Boolean,
				default: false,
			},
			// 关闭文本
			closeText: {
				type: String,
				default: "关闭"
			},
			// 边框
			border: {
				type: Boolean,
				default: true
			},
			// 圆角
			borderRadius: {
				type: String,
				default: '16rpx'
			}
		},
		data() {
			return {
				defaultColor: "",
			};
		},
		mounted() {
			this.defaultColor = this.themeColor || this.$itu.color.primary;
		},
		methods: {
			emit(param) {
				this.$emit(param)
			}
		}
	}
</script>

<style lang="scss">
	.itu-official-account {
		position: relative;

		&__content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFF;
			padding: 25rpx;
			border: 1rpx solid transparent;
		}

		&__logo {
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			flex-shrink: 0;
		}

		&__title {
			text-align: left;
			font-weight: bold;
		}

		&__tag {
			font-size: 20rpx;
			height: 38rpx;
			line-height: 38rpx;
			padding: 0 10rpx;
			background-color: #3FC260;
			color: #FFFFFF;
			border-radius: 8rpx;
			flex-shrink: 0;
		}

		&__follow {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;
			line-height: 50rpx;
			width: 138rpx;
			padding: 10rpx;
			border-radius: 30rpx;
			background-color: #FF8328;
			color: #FFF;
			font-size: 22rpx;
			flex-shrink: 0;
		}

		&__close {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			right: 0;
			top: 0;
			width: 80rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 0 14rpx 0 14rpx;
			background-color: rgba(0, 0, 0, .05);
			color: rgba(0, 0, 0, .3);
			font-size: 24rpx;
		}
	}
</style>